<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon"
	href="http://training-static.linesno.com/switch_run/favicon.ico" />
<title>云主机管理后台</title>
<link
	href="http://training-static.linesno.com/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="http://training-static.linesno.com/sb-admin/css/sb-admin.css"
	rel="stylesheet">
<link
	href="http://training-static.linesno.com/vendor/fontawesome-free/css/all.min.css"
	rel="stylesheet" type="text/css">
<link
	href="http://training-static.linesno.com/vendor/datatables/dataTables.bootstrap4.css"
	rel="stylesheet">

</head>

<body>
	<div class="container-fluid">
		<br />
		<div class="row">
			<!-- 
				<div class="col-4">1 of 3</div>
				 -->
			<div class="col-12">
				<form id="modifyForm" enctype="multipart/form-data">

					<div class="form-group row">
						<label class="col-sm-2 col-form-label"
							for="exampleFormControlSelect1">所属主机</label>
						<div class="col-sm-10">
							<select class="form-control" name="masterMachine">
								<option th:each="m:${servers}" th:value="${m.serverName}"
									th:text="${m.serverName}+' ('+${m.serverDesc}+')'"></option>
							</select>
						</div>
					</div>
		
					<!-- 
					<div class="form-group row">
						<label class="col-sm-2 col-form-label"
							for="exampleFormControlFile1">虚拟机图片</label>
						<div class="col-sm-10">
							<input type="file" name="file" multiple="multiple"
								onchange="preview(this)" class="form-control-file"
								id="exampleFormControlFile1">
							<div id="preview">
								<img
									style="width: 80px; height: 80px; margin-top: 10px; border-radius: 5px;"
									src="">
							</div>
						</div>
					</div>
					   <div class="form-group row">
						<label for="exampleInputEmail1">虚拟机图片</label>
						<input type="text" class="form-control" name="goodsPic" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="虚拟机图片">
					  </div>
					   -->
					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">虚拟机名称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="machineName"
								placeholder="虚拟机名称">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">虚拟机描述</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="machineDesc"
								placeholder="虚拟机描述">
						</div>
					</div>

					<!-- 
					   <div class="form-group row">
						<label  class="col-sm-2 col-form-label" for="exampleInputPassword1">库存</label>
						 <div class="col-sm-10">
							<input type="text" class="form-control" name="machineNum" placeholder="库存">
						</div>
					  </div>
					   <div class="form-group row">
						<label class="col-sm-2 col-form-label"  for="exampleInputPassword1">价格</label>
						 <div class="col-sm-10">
							<input type="text" class="form-control" name="machinePrices" placeholder="价格">
						</div>
					  </div>
					  -->

					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">虚拟机IP</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="machineIp"
								placeholder="虚拟机IP">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">管理员密码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="machinePwd"
								placeholder="管理员密码">
						</div>
					</div>

					<!-- 
					   <div class="form-group row">
						<label class="col-sm-2 col-form-label"  for="exampleInputPassword1">打折</label>
						 <div class="col-sm-10">
							<input type="text" class="form-control" name="discount" placeholder="打折">
						</div>
					  </div>
					 	 -->

					<br />
					<button type="button" onclick="save()"
						class="btn btn-primary btn-lg btn-block">保存</button>
				</form>
			</div>
		</div>
	</div>

	<script
		src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>
	<script
		src="http://training-static.linesno.com/js/jquery.form/jquery.form.js"></script>

	<script type="text/javascript">
			var options = {
			    url: "/manager/machine_add_save", 
			    type: "post",   
			    success: successfun,
			    dataType: "json", 
			    timeout: 3000     
			};
			
			function save(){
				$('#modifyForm').ajaxSubmit(options) ; 
			}
			
			function successfun(response, status) {
			    layer.msg(response.message);
			}

			function preview(file) {
				var prevDiv = document.getElementById('preview');
				if (file.files && file.files[0]) {
					var reader = new FileReader();
					reader.onload = function(evt) {
						prevDiv.innerHTML = '<img style="width: 80px; height: 80px; margin-top: 10px; border-radius: 5px;" src="' + evt.target.result + '" />';
					}
					reader.readAsDataURL(file.files[0]);
				} else {
					prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
				}
			}
		</script>

</body>
</html>
